<template>
<div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div>
        <span style="margin-left:20px">
          <span style="font-size:15px;margin-right:10px;font-weight:bold;color:#606266">关键字</span>
          <el-input v-model="input" placeholder="根据编号搜索" size="small" style="width:200px;"></el-input>
        </span>
        <el-button style="float: right;" size="small" type="primary" @click="search">搜索</el-button>
        <el-button style="float: right;margin-right:10px"  size="small" @click="clear">清除</el-button>
        <el-alert
        :title='`数据一共${counts}条`'
        type="info"
        show-icon
        :closable="false"
        style="margin:15px 0 15px 0">
        </el-alert>
        </div>
        <div class="text item">
          <el-table
          :data="tableData"
          v-loading="loading"
          :header-cell-style="{background:'#fafafa',borderBottom:'1px solid gray'}"
          style="width: 100%;">
            <el-table-column
            prop="id"
            label="编号"
            width="220">
            </el-table-column>
            <el-table-column
            prop="questionType"
            label="题型">
            </el-table-column>
            <el-table-column
            prop="address"
            label="题目编号"
            width="190">
            <template #default='{row}'>
              <a v-for="item in row.questionIDs" :key="item.index" style="color:#1E90FF" @click="preview(item)">
                  {{item.number}}
              </a>
            </template>
            </el-table-column>
            <el-table-column
            prop="addTime"
            label="录入时间"
            width="160">
            </el-table-column>
            <el-table-column
            prop="totalSeconds"
            label="答题时间(s)">
            </el-table-column>
            <el-table-column
            prop="accuracyRate"
            label="正确率(%)">
            </el-table-column>
            <el-table-column
            prop="userName"
            label="录入人">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
              <template #default="{row}">
                 <el-button type="danger" icon="el-icon-delete" circle @click="del(row.id)"></el-button>
              </template>
            </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="form.pagesize"
        layout="prev, pager, next,sizes,jumper"
        :total="counts"
        style="float: right;margin:15px 0 15px 0"
        background
        >
        </el-pagination>
      </el-card>
    </div>

    <!-- 预览dialog -->
    <el-dialog title="题目预览" :visible="showDialog" @close="closeDialog" :close-on-click-modal="false" width="800px">
      <el-descriptions style="border-bottom:1px solid black" :column="4">
        <el-descriptions-item label="【题型】">{{details.questionType}}</el-descriptions-item>
        <el-descriptions-item label="【编号】">{{details.id}}</el-descriptions-item>
        <el-descriptions-item label="【难度】">{{details.difficulty}}</el-descriptions-item>
        <el-descriptions-item label="【标签】">{{details.tags}}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{details.subjectName}}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{details.directoryName}}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{details.direction}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions direction="vertical">
        <el-descriptions-item label="【题干】">
          <div style="color:blue">{{delHtmlTag(details.question)}}</div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions v-show="details.questionType!=='简答题'">
        <el-descriptions-item :label='`${details.questionType} 选项`'>
          （以下选中的选项为正确选项）
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :colon="false"  v-show="details.questionType!=='简答题' && details.questionType!=='多选题' ">
          <el-descriptions-item>
          <el-radio-group style="display: flex;flex-flow: column nowrap;align-items: flex-start;" :value="1">
           <el-radio :label="item.isRight" v-for="item in details.options" :key="item.index" style="margin-bottom:20px">{{item.title}}</el-radio>
           <!-- <el-radio :label="6" style="margin:20px 0 20px 0">{{details.options[1].title}}</el-radio>
           <el-radio :label="9">{{details.options[2].title}}</el-radio>
           <el-radio :label="5">{{details.options[3].title}}</el-radio> -->
          </el-radio-group>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :colon="false"  v-show="details.questionType!=='简答题' && details.questionType!=='单选题'">
          <el-descriptions-item>
          <el-checkbox-group :value="checkboxList" style="display: flex;flex-flow: column nowrap;align-items: flex-start;">
            <el-checkbox v-for="item in details.options" :label="item.title" :key="item.index">{{item.title}}</el-checkbox>
          </el-checkbox-group>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="border-top:1px solid black">
        <el-descriptions-item label="【参考答案】" labelStyle="margin-top:15px" contentStyle="margin-top:10px">
          <el-button type="danger" @click="vshow=details.videoURL?true:false" size="small">视屏答案预览</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions direction="vertical" :colon="false" v-show="vshow">
        <el-descriptions-item>
          <video :src="details.videoURL" controls style="width:400px"></video>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="border-bottom:1px solid black;border-top:1px solid black;">
        <el-descriptions-item label="【答案解析】" labelStyle="margin-top:15px" contentStyle="margin-top:15px">{{delHtmlTag(details.answer)}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions>
        <el-descriptions-item label="【题目备注】" labelStyle="margin-top:15px" contentStyle="margin-top:15px">{{details.remarks}}</el-descriptions-item>
      </el-descriptions>
      <div slot='footer' style="float:right;margin-top:-25px">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
      </div>
    </el-dialog>
</div>
</template>

<script>
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions.js'
import { questionTypes, difficulty } from '@/api/hmmm/constants.js'

export default {
  data () {
    return {
      input: '',
      tableData: [],
      form: {
        pagesize: 20,
        page: 1
      },
      qid: {
        id: ''
      },
      delid: {
        id: ''
      },
      counts: 0,
      showDialog: false,
      details: {},
      vshow: false,
      loading: false,
      checkboxList: []
    }
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    async getRandomsList () {
      this.loading = true
      const { data } = await randoms(this.form)
      // console.log(data)
      data.items.forEach(item => {
        questionTypes.forEach(v => {
          if (item.questionType === v.value) {
            item.questionType = v.label
          }
        })
      })
      this.tableData = data.items
      this.counts = data.counts
      this.loading = false
      // console.log(data)
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      this.form.page = 1
      this.getRandomsList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.form.page = val
      this.getRandomsList()
    },
    closeDialog () {
      this.showDialog = false
      this.details = {}
      this.vshow = false
    },
    async preview (item) {
      this.showDialog = true
      this.qid.id = item.id
      const { data } = await detail(this.qid)
      questionTypes.forEach(v => {
        if (data.questionType === v.value) {
          data.questionType = v.label + '题'
        }
      })
      difficulty.forEach(v => {
        if (data.difficulty === v.value) {
          data.difficulty = v.label
        }
      })
      const checkbox = data.options.filter(v => v.isRight === 1)
      checkbox.forEach(v => {
        this.checkboxList.push(v.title)
      })
      // console.log(data)
      this.details = data
    },
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.delid.id = id
        await removeRandoms(this.delid)
        if (this.tableData.length === 1 && this.form.page > 1) {
          this.form.page--
        }
        this.getRandomsList()
        this.$message.success('删除成功')
      }).catch(() => {

      })
    },
    search () {
      if (this.input) {
        const list = this.tableData.filter(item => item.id === this.input)
        this.tableData = list
      }
    },
    // 处理标签
    delHtmlTag (str) {
      if (str) {
        return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, '')
      }
    },
    // 清除按钮
    clear () {
      this.input = ''
      this.getRandomsList()
    }

  }
}
</script>

<style scoped></style>
